<template>
    <div class="cart">
    	<div class="title_car">购物车</div>
    	<div class="kongbai"></div>
    	<div class="person">
			<div>
				<span>张贵洲</span>
				<span>13009255587</span>
			</div>
			<p>送至：西三旗桥东(公交站)三旗百汇物美</p>
			<span>></span>
    	</div>
    	<div class="car">
    		<div class="cartitle">
    			<span class="ct1"><i class="icon iconfont icon-duigou"></i></span>
    			<span class="ct2"></span>
    			<span class="ct3">多点超市(西三旗店)</span>
    			<span class="ct4">></span>
    		</div>
    		<ul class="carlist">
    			<li class="carlist_li" v-for="(item,index) in showList" :key="index">
    				<span class="duihao">
    					<i class="icon iconfont icon-duigou"></i>
    				</span>
    				<div class="clleft">
    					<p>{{item.title}}</p>
    					<br>
    					<span>￥{{(item.price/100).toFixed(2)}}</span>
    				</div>
    				<div class="clright">
    					<span class="clright1" @click="minusNumber(item)">
    						<img src="../../common/img/minus.png">
    					</span>
    					<span class="clright2">{{item.number}}</span>
    					<span class="clright3" @click="addNumber(item)">
    						<img src="../../common/img/add.png">
    					</span>
    				</div>
    			</li>
    		</ul>
    		<div class="total_price">
    			<div>
    				<div>合计：<span class="total">{{totalPrice}}</span></div>
    				<p>促销已抵扣金额：￥0.00</p>
    			</div>
    			<span>选好了</span>
    		</div>
    	</div>
    </div>
</template>
<script>
export default{
    data(){
        return {
        	totalPrice:0,
        }
	},
	computed:{
		 showList:function(){
            return this.$store.getters.showList;
        },
        jisuanPrice:function(){
			var lists = this.$store.getters.showList;
			var self = this;
			self.totalPrice = 0;
			lists.forEach(function(a){
				self.totalPrice += a.price * a.number;
			})
			self.totalPrice = (self.totalPrice.toFixed(2))/100;

		}
	},
	methods:{ 
		addNumber:function(item){
			this.$store.dispatch('addList',item);
			var lists = this.$store.getters.showList;
			var self = this;
			self.totalPrice = 0;
			lists.forEach(function(a){
				self.totalPrice += a.price * a.number;
			})
			self.totalPrice = ((self.totalPrice)/100).toFixed(2);
		},
		minusNumber:function(item){
			this.$store.dispatch('minusList',item);
			var lists = this.$store.getters.showList;
			var self = this;
			self.totalPrice = 0;
			lists.forEach(function(a){
				self.totalPrice += a.price * a.number;
			})
			self.totalPrice = ((self.totalPrice)/100).toFixed(2);
		}
	},
	created(){
		var lists = this.$store.getters.showList;
			var self = this;
			self.totalPrice = 0;
			lists.forEach(function(a){
				self.totalPrice += a.price * a.number;
			})
			self.totalPrice = ((self.totalPrice)/100).toFixed(2);
	}
}
</script>
<style scoped>
	html,body{
		background-color:#f6f6f6;
	}
	.cart{
		display: flex;
		flex-direction: column;
		background-color: #f6f6f6;
	}
	.title_car{
		background-color: white;
		box-shadow: 0 0 .1rem rgba(0,0,0,.2);
		height: .44rem;
		text-align: center;
		line-height: .44rem;
		font-size: .16rem;
		position: fixed;
		top:0;
		left:0;
		right:0;
	}
	.kongbai{
		height: .44rem;
		width: 100%;
		margin-bottom: .1rem;
	}
	.person{
		height: .48rem;
		padding:.1rem .25rem .1rem .1rem;
		background: url(../../common/img/shoppingline.png) repeat-x;
		background-position: top left;
		background-size: auto .02rem;
		background-color: white;
		position: relative;
		margin-bottom: .1rem;
	}
	.person>div{
		margin-bottom: .06rem;
	}
	.person>span{
		position: absolute;
		right: .05rem;
		top:47%;
		color:grey;
	}
	.person>p{
		color:grey;
		font-size:.13rem;
	}
/*购物车*/
	.cartitle{
		height: .44rem;
		width: 100%;
		position: relative;
		line-height: .44rem;
		background-color: white;
		display: flex;
	}
	.ct1{
		width: .43rem;
		height: 100%;
		text-align: center;
	}
	.ct1 i,.duihao i{
		font-size: .2rem;
		color:#ff712b;
	}
	.ct2{
		height: 100%;
		width: .3rem;
		background:url(../../common/img/market_title.png) no-repeat center;
		background-size: .3rem .3rem;
	}
	.ct4{
		position:absolute;
		right: .1rem;
	}
	.carlist{
		width: 100%;
		background-color: white;
		display: flex;
		flex-direction: column;
	}
	.carlist_li{
		display: flex;
		box-sizing: content-box;
		border-top:1px solid #f0f0f0;
		display: flex;
		padding: .1rem 0;
		height: .51rem;
	}
	.duihao{
		display: inline-block;
		width: .4rem;
		text-align: center;
		height: 100%;
	}
	.duihao i{
		display:inline-block;
		width: 100%;
		height: 100%;
		margin-top:40%;
	}
	.clleft{
		width:66%;
	}
	.clright{
		width:20%;
		display: flex;
		margin:.19rem .04rem 0 0;
	}
	.clright2{
		width: 63%;
		text-align: center;
	}
	.clright3,.clright1{
		width: 35%;
		display: inline-block;
	}
	.clright3 img,.clright1 img{
		width: 100%;
	}
	.total_price{
		box-sizing: content-box;
		height: .45rem;
		padding:.1rem;
		display: flex;
		background:white;
	}
	.total_price>div{
		width:75%;
	}
	.total_price>div>div{
		color:#ff712b;
		margin-bottom: .1rem;
	}
	.total_price>div>p{
		color:#ccc;
	}
	.total{
		font-size: .25rem;
	}
	.total_price>span{
		background-color: #ff712b;
		padding:0 .22rem;
		line-height: .45rem;
		color:white;
		border-radius: .05rem;
	}
</style>
